<template>
  <TopHeaderNav></TopHeaderNav>
  <div class="content-wrapper">
    <div class="page-content">
      <el-row :gutter="20">
        <el-col :span="5" :offset="3">
          <el-affix :offset="70">
            <el-card class="opacity" v-loading="loadingTags">
              <div class="tag-list">
                <span class="tag-item" :style="'background-color: '+rdmRgbWarmColor()" v-for="tag in tagList" :key="tag" @click="selectTag(tag.id)" :id="'tag_'+tag.id" :data-tag-id="tag.id">
                  <i v-if="tag.tagIcon" :class="tag.tagIcon"></i> {{tag.tagName}}&nbsp;
                </span>
              </div>
            </el-card>
          </el-affix>
        </el-col>
        <el-col :span="10">
          <div class="articles-holder" v-loading="loadingArticles" style="min-height: auto;">
            <template v-for="article in articlePageResult.records" :key="article">
              <router-link :to="{ name:'article', params: { articleId: article.id }}">
                <div class="article-wrapper">
                  <div class="article-bg" v-bind:style='{backgroundImage:"url("+article.picture.halfImgUrl+")"}'></div>
                  <div class="article-wrapper-content">
                    <h2 class="article-title">{{article.title}}</h2>
                    <div class="article-preview">
                      <p class="article-summary">{{article.summary}}</p>
                      <div class="tag-box">
                        <div class="tag-item" v-for="tag in article.tags" :key="tag">
                          <span v-bind:style="`${tag.tagCss?tag.tagCss:''}`"><i v-bind:class="`${tag.tagIcon?tag.tagIcon:'fa fa-tag'}`"></i><small>&nbsp;{{ tag.tagName }}</small></span>
                        </div>
                      </div>
                      <el-divider style="margin: 5px 0;"></el-divider>
                      <div class="article-info-box">
                        <div class="article-info-item"><i class="el-icon-time"></i> 创建日期 {{Utils.formatDate(article.createTime,'yyyy-MM-dd hh')}}<small>H</small></div>
                        <div class="article-info-item"><i class="el-icon-chat-dot-square"></i> {{article.commentCount}} 条评论</div>
                        <div class="article-info-item"><i class="el-icon-view"></i> {{article.viewCount}} 次浏览</div>
                        <div class="article-info-item"><i class="el-icon-thumb"></i> {{article.thumbCount}} 个点赞</div>
                      </div>
                    </div>
                  </div>
                </div>
              </router-link>
            </template>
          </div>
          <div class="text-center">
            <el-pagination v-if="articlePageResult!=null" background layout="pager" v-model:page-size="articlePageResult.size" v-model:currentPage="articlePageResult.current" v-model:total="articlePageResult.total" @current-change="handleCurrentChange" :pager-count="5" :hide-on-single-page="true">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import TopHeaderNav from '@/components/TopHeaderNav'
  export default {
    components: {
      TopHeaderNav
    },
    data() {
      this.$axios.get("/api/article-service/articleTag/getAllUsable").then(tagList => {
        this.tagList = tagList;
        setTimeout(() => {
          this.loadingTags = false;
        }, 1000);
      }).catch(() => {})
      this.loadArticles(1);
      return {
        loadingTags: true,
        loadingArticles: true,
        tagList: {},
        articlePageResult: {
          total: 0,
          size: 5,
          current: 1
        }
      }
    },
    methods: {
      // 随机暖色
      rdmRgbWarmColor() {
        let arr = [];
        for (var i = 0; i < 3; i++) {
          arr.push(Math.floor(Math.random() * 64 + 128));
        }
        let [r, g, b] = arr;
        var color = `rgb(${r},${g},${b})`;
        return color;
      },
      selectTag(tagId) {
        let $tagEl = $('#tag_' + tagId);
        if ($tagEl.hasClass('select')) {
          $tagEl.removeClass('select');
          $tagEl.find('i.fa-check').remove();
        } else {
          $tagEl.addClass('select');
          $tagEl.append('<i class="fa fa-check"></i>');
        }
        this.loadArticles(1);
      },
      loadArticles(pageNum) {
        this.loadingArticles = true;
        let tagIds = new Array();
        $(".tag-item.select").each((index, item) => {
          tagIds.push(parseInt($(item).attr("data-tag-id")));
        })
        this.$axios.get('/api/article-service/article/pageUsableByQuery', {
          tagIds: tagIds,
          current: pageNum
        }).then((pageResult) => {
          this.articlePageResult = pageResult;
          setTimeout(() => {
            this.loadingArticles = false;
          }, 1000);
        }).catch(() => {})
      },
      handleCurrentChange(pageNum) {
        this.loadArticles(pageNum);
      }
    }
  }
</script>